<template>
  <div>
    <h3>todolist</h3>
    <van-sticky>
      <headerT @showdb="showdb" :cd="cd"></headerT>
      <inputT @par="par" :cd="cd"></inputT>
    </van-sticky>

    <div id="listTdiv">
      <listT :cd="cd" @shan="shan"></listT>
    </div>

    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '60%' }"
      :overlay="true"
      :round="true"
    >
      <p><button @click="cd = '#f5f5f5'">改变主题</button></p>
      <p><button @click="cd = 'plum'">改变主题</button></p>
      <p><button @click="cd = 'skyblue'">改变主题</button></p>
      <p><button @click="cd = 'pink'">改变主题</button></p>
    </van-popup>
  </div>
</template>

<script>
import headerT from "../components/todolist/headerT";
import inputT from "../components/todolist/inputT";
import listT from "../components/todolist/listT";
export default {
  data() {
    return {
      show: false,
      cd: "#F39894",
    };
  },
  mounted() {
    this.$store.dispatch("getlist");
  },
  methods: {
    par(data) {
      this.$store.commit("app", data);
    },
    showdb() {
      this.show = ! this.show;
    },

    shan(id) {
      this.$store.commit("remove", id);
    },
  },
  components: {
    headerT,
    inputT,
    listT,
  },
};
</script>

<style lang="scss" scoped>
#listTdiv {
  margin-bottom: 60px;
}
button {
  width: 150px;
  height: 40px;
  border-radius: 20px;
  margin-top: 20px;
}
</style>
